<script setup>
import { reactive, ref } from 'vue'
import { getStuBedListApi, getStuListApi, applySaveApi } from '@/api/mybed'
import { useUserStore } from '@/store'

const userStore = useUserStore()

const userId = userStore.userId
const userType = userStore.userType


// 弹窗属性
const dialog = reactive({
    title: '',
    width: 700,
    height: 320,
    visible: false
})
// 表格数据
const tableData = ref([])
// 学生列表
const stuList = ref([])
const value = ref([])

const getStuList = async () => {
    let res = await getStuListApi({
        stuId: userId
    })
    if (res) {
        stuList.value = res.data
    }
}
// 获取宿舍信息
const getStuBedList = async () => {
    let res = await getStuBedListApi({
        stuId: userId,
        userType: userType
    })
    if (res) {
        tableData.value = res.data
    }
}

getStuBedList()

// 调换宿舍
const applyBtn = (row) => {
    getStuList()
    dialog.title = '申请调换宿舍'
    dialog.visible = true
}
// 弹窗确认
const onConfirm = async () => {
    let res = await applySaveApi({
        applyId: userId,
        changeId: value.value[0]
    })
    if (res) {
        ElMessage({
            message: res.msg,
            type: 'success',
        })
        dialog.visible = false
    }
}
// 弹窗取消
const onClose = () => dialog.visible = false

const filterMethod = (query, item) => item.stuName.indexOf(query) > -1

const btnChange = (select, index) => {
    let item = value.value
    if (item.length > 0) {
        for (let i = 0; i < item.length; i++) {
            for (let j = 0; j < select.length; j++) {
                if (item[i] !== select[j]) {
                    item.splice(i, 1)
                }
            }
        }
    }
}

const leftChange = (item, index) => {
    if (item.length > 0) {
        for (let i = 0; i < item.length; i++) {
            for (let j = 0; j < index.length; j++) {
                if (item[i] !== index[j]) {
                    item.splice(i, 1)
                }
            }
        }
    }
}
</script>

<template>
    <template v-if="userType === '1'">
        <div>
            管理员只负责管理学生宿舍
        </div>
    </template>
    <template v-else>
        <el-table :data="tableData">
            <el-table-column prop="stuName" label="姓名" />
            <el-table-column prop="className" label="班级" />
            <el-table-column prop="buildName" label="栋数" />
            <el-table-column prop="storeyName" label="层数" />
            <el-table-column prop="roomCode" label="宿舍" />
            <el-table-column prop="bedCode" label="床位" />
            <el-table-column label="房间类型">
                <template #default="scope">
                    <el-tag v-if="scope.row.roomType === '1'">1人间</el-tag>
                    <el-tag v-if="scope.row.roomType === '2'">2人间</el-tag>
                    <el-tag v-if="scope.row.roomType === '4'">4人间</el-tag>
                    <el-tag v-if="scope.row.roomType === '6'">6人间</el-tag>
                    <el-tag v-if="scope.row.roomType === '8'">8人间</el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150" align="center">
                <template #default="scope">
                    <el-button icon="Setting" type="primary" @click="applyBtn(scope.row)">调换宿舍</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialog.visible" :width="dialog.width" :close-on-click-modal="false">
            <template #header>
                <h1>{{ dialog.title }}</h1>
            </template>
            <div :style="{ height: dialog.height + 'px' }" style="display: flex; justify-content: center;">
                <el-transfer v-model="value" :data="stuList" :props="{ key: 'stuId', label: 'stuName' }" filterable
                    :filter-method="filterMethod" filter-placeholder="请输入姓名" @left-check-change="leftChange"
                    @change="btnChange">
                </el-transfer>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onClose">取消</el-button>
                    <el-button type="primary" @click="onConfirm">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </template>
</template>